<template>
  <div class="main">
    <el-carousel :height="heightImg">
      <el-carousel-item>
        <img src="@/assets/images/banner.png" alt="" class="banner" />
      </el-carousel-item>
      <el-carousel-item>
        <img src="@/assets/images/banner2.png" alt="" class="banner" />
      </el-carousel-item>
    </el-carousel>
    <Course />
    <Hot />
    <Teachers />
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from "@/store/modules/counter.ts";
import { useRouter } from "vue-router";
import Course from "./components/course.vue";
import Hot from "./components/hot.vue";
import Teachers from "./components/teachers.vue";

const counterStore = useCounterStore();
const route = useRouter();
function goPath(path) {
  route.push(path);
}

const heightImg = ref("0px");

onMounted(() => {
  updateHeight();
  window.addEventListener("resize", updateHeight);
});
onUnmounted(() => {
  window.removeEventListener("resize", updateHeight);
});

function updateHeight() {
  const browserWidth = window.innerWidth > 1200 ? window.innerWidth : 1200;
  // 浏览器图片高度 = 图片高度 / 图片宽度 * 浏览器图片宽度 (判断是否有滚动条，若有则-17)
  if (
    document.documentElement.clientHeight <
    document.documentElement.offsetHeight
  ) {
    heightImg.value = `${(1182 / 3840) * browserWidth}px`;
  } else {
    heightImg.value = `${(1182 / 3840) * (browserWidth - 17)}px`;
  }
}
</script>

<style lang="scss" scoped>
.main {
  min-width: 1200px;
  .banner {
    width: 100%;
  }
}

:deep(.el-carousel__button) {
  width: 6px;
  height: 6px;
  border-radius: 4px;
  background-color: #e6e6e6;
}
:deep(.is-active .el-carousel__button) {
  background: #fff;
  width: 14px;
}
</style>
